<%@ page import="com.onlinevideo.service.impl.FavoritesServiceImpl" %>
<%@ page import="com.onlinevideo.entity.User" %>
<%@ page import="com.onlinevideo.entity.Favorites" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/js/sweetalert.min-2.1.2.js"></script>
    <script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        .gro {
            margin-bottom: 0px;
        }

        .rows {
            border-bottom: 2px solid black;
            margin-top: 5px;
            margin-bottom: 15px;
            padding-bottom: 5px;
            height: 112px;
        }
        .height{
            height: 30px
        }
        hr {
            margin-top: 2px;
            margin-bottom: 2px;
        }

        .abtn {
            float: left;
            color: #337ab7;
        }

        .active {
            background-color: #337ab7 !important;
            color: white;
        }

        .abtn:hover {
            background-color: #337ab7 !important;
            color: white;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".abtn").click(function (event) {
                event.preventDefault();
                $(".abtn").removeClass("active");
                $(this).addClass("active");
                $.ajax({
                    url: "../favorites.do",
                    type: "post",
                    data: {
                        action: "getCollectionItem",
                        collectionId: $(this).attr("data-id")
                    },
                    success: function (data) {
                        var parse = JSON.parse(data);
                        console.log(parse)
                        $("#collectionContainer").empty()
                        if (parse.code == 1) {
                            var video = parse.data
                            for (let i = 0; i < video.length; i++) {
                                var coll = "<div class='row rows'>" +
                                    "    <div style='height: 50px' class='col-md-2 col-sm-2'>" +
                                    "        <div class='form-group gro'>" +
                                    "            <ol class='height' style='list-style: none;'>" +
                                    "                <li style='float: left'>" +
                                    "                    <a target='_blank' href='../video.do?action=play&videoId=" + video[i].uploadTime + "' style='width: 180px!important;height: 100px;'><img src='../" + video[i].videoImg + "'\n" +
                                    "                                    style='width: 180px!important;height: 100px;margin-right: 15px'" +
                                    "                                    <!--class='img-responsive' alt='Responsive image'--></a>" +
                                    "                </li>" +
                                    "                <li style='max-width: 400px;position: relative;left: 200px;top: -100px;'><h4 style=';font-weight: bold;font-size: 1.17em;margin-top: 0'>" +
                                    "                    " + video[i].videoName + "</h4> <h5 style='font-size: 14px;margin-bottom: -5px'>" +
                                    "                    " + video[i].videoDescription + "</h5></li>" +
                                    "                <li style='float: right'>\n" +
                                    "                    <button type='button' style='position: relative;left: 400px;top: -67px' class='btn btn-primary btn-sm unFavorites' data-id='" + video[i].userId + "'>" +
                                    "                        取消收藏" +
                                    "                    </button>" +
                                    "                </li>" +
                                    "            </ol>" +
                                    "        </div>" +
                                    "    </div>" +
                                    "</div>"
                                $("#collectionContainer").append(coll);
                            }
                        }
                    }

                });

            });
            //添加收藏夹
            $("#addFavorites").click(function () {
                var addFavoritesName = $("#addFavoritesName").val().trim();
                if (addFavoritesName.length <= 0) {
                    swal("提示", "请输入收藏夹名称", "error").then(function (isOk) {
                    });
                }
                $.ajax({
                    url: "../favorites.do",
                    type: "post",
                    data: {
                        action: "insert",
                        favoritesName: addFavoritesName
                    },
                    success: function (data) {
                        var parse = JSON.parse(data);
                        if (parse.code == 1) {
                            swal("提示", parse.message, "success").then(function (isOk) {
                                location.reload();
                            });
                        } else {
                            swal("提示", parse.message, "error").then(function (isOk) {
                            });
                        }
                    }

                });
            });
            //修改收藏夹
            $("#editFavorites").click(function () {
                var editFavoritesName = $("#editFavoritesName").val().trim();
                if (editFavoritesName.length <= 0) {
                    swal("提示", "请输入收藏夹名称", "error").then(function (isOk) {
                    });
                }
                var id = $("#editCollectionSelect").val().trim();
                $.ajax({
                    url: "../favorites.do",
                    type: "post",
                    data: {
                        action: "update",
                        favoritesId: id,
                        favoritesName: editFavoritesName
                    },
                    success: function (data) {
                        var parse = JSON.parse(data);
                        if (parse.code == 1) {
                            swal("提示", parse.message, "success").then(function (isOk) {
                                location.reload();
                            });
                        } else {
                            swal("提示", parse.message, "error").then(function (isOk) {
                            });
                        }
                    }

                });
            });
            //删除收藏夹
            $("#deleteFavorites").click(function () {
                var id = $("#deleteCollectionSelect").val().trim();
                swal("提示", "你确认需要删除这个收藏夹吗？", "info").then(function (isOk) {
                    if (isOk) {
                        $.ajax({
                            url: "../favorites.do",
                            type: "post",
                            data: {
                                action: "delete",
                                favoritesId: id,
                            },
                            success: function (data) {
                                var parse = JSON.parse(data);
                                if (parse.code == 1) {
                                    swal("提示", parse.message, "success").then(function (isOk) {
                                        location.reload();
                                    });
                                } else {
                                    swal("提示", parse.message, "error").then(function (isOk) {
                                    });
                                }
                            }
                        });
                    }
                });

            });
            $("body").on("click", ".unFavorites", function () {
                var id = $(this).attr("data-id").trim();
                swal("提示", "你确认需要删除这个收藏夹吗？", "info").then(function (isOk) {
                    if (isOk) {
                        $.ajax({
                            url: "../favorites.do",
                            type: "post",
                            data: {
                                action: "unFavorites",
                                favoritesVideoId: id,
                            },
                            success: function (data) {
                                var parse = JSON.parse(data);
                                if (parse.code == 1) {
                                    swal("提示", parse.message, "success").then(function (isOk) {
                                        location.reload();
                                    });
                                } else {
                                    swal("警告", parse.message, "error").then(function (isOk) {
                                    });
                                }
                            }
                        });
                    }
                });
            });

        });
    </script>
</head>
<body>
<div class="container-fluid">
    <hr style="height:10px;border:none;border-top:2px solid #000000;"/>
    <div class="row">
        <div class="col-md-12">
            <div class="bs-example" data-example-id="btn-variants">
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addFavoritesBtn">
                    新增收藏夹
                </button>
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                        data-target="#editFavoritesBtn">修改收藏夹
                </button>
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                        data-target="#deleteFavoritesBtn">删除收藏夹
                </button>
            </div>
        </div>
    </div>
    <hr style="height:10px;border:none;border-top:2px solid #000000;"/>
    <div class="row" style="width: 100%;height: 50px;margin: 0px;">
        <ul class="nav navbar-nav navbar-left">
            <%
                User user = (User) session.getAttribute("user");
                if (user == null) {
                    user = new User();
                    user.setId(1L);
                }
                FavoritesServiceImpl favoritesService = new FavoritesServiceImpl();
                List<Favorites> favoritesList = favoritesService.queryByUser(user.getId());
                for (int i = 0; i < favoritesList.size(); i++) {
                    Favorites favorites = favoritesList.get(i);
            %>
            <li><a href="#" style="width: 150px" data-id="<%=favorites.getId()%>"
                   class="abtn<%= i==0 ?" active":"" %> "><%=favorites.getFavoritesName()%>
            </a></li>
            <%
                }
            %>
        </ul>
    </div>
    <hr style="height:10px;border:none;border-top:2px solid #000000;"/>

    <div id="collectionContainer">

    </div>
    <div class="addFavoritesModel">
        <div class="modal fade" id="addFavoritesBtn" tabindex="-1" role="dialog" aria-labelledby="addFavoritesLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="addFavoritesLabel">新增收藏夹</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-2 "></div>
                            <div class="col-md-8 ">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label for="addFavoritesName" class="col-sm-3 control-label">收藏夹名称:</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="addFavoritesName"
                                                   placeholder="请输入收藏夹名称">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-8">
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-primary opera" id="addFavorites">添加</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="editFavoritesModel">
        <div class="modal fade" id="editFavoritesBtn" tabindex="-1" role="dialog" aria-labelledby="editFavoritesLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editFavoritesLabel">修改收藏夹</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-2 "></div>
                            <div class="col-md-8 ">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label for="editCollectionSelect" class="col-sm-3 control-label">收藏夹名称:</label>
                                        <select name="collectionSelect" id="editCollectionSelect">
                                            <%
                                                List<Favorites> favorites = new FavoritesServiceImpl().queryByUser(user.getId());
                                                for (Favorites favorite : favorites) {
                                            %>
                                            <option value="<%=favorite.getId()%>"><%=favorite.getFavoritesName()%>
                                            </option>
                                            <%
                                                }
                                            %>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="editFavoritesName" class="col-sm-3 control-label">收藏夹名称:</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="editFavoritesName"
                                                   placeholder="请输入收藏夹名称">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-8">
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-primary opera" id="editFavorites">修改</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="deleteFavoritesModel">
        <div class="modal fade" id="deleteFavoritesBtn" tabindex="-1" role="dialog"
             aria-labelledby="deleteFavoritesLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="deleteFavoritesLabel">删除收藏夹</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-2 "></div>
                            <div class="col-md-8 ">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label for="deleteCollectionSelect"
                                               class="col-sm-3 control-label">收藏夹名称:</label>
                                        <select name="collectionSelect" id="deleteCollectionSelect">
                                            <%
                                                for (Favorites favorite : favorites) {
                                            %>
                                            <option value="<%=favorite.getId()%>"><%=favorite.getFavoritesName()%>
                                            </option>
                                            <%
                                                }
                                            %>
                                        </select>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-8">
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-primary opera" id="deleteFavorites">删除</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
</html>
